<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib  uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/resource/css/bootstrap.min.css" />
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
</head>
<body>
	<button type="button" class="btn btn-primary btn-sm"  onclick="toAdd()">添加</button>
	<div class="container-fluid">
	<!-- 查询条件 -->
		<div>
			<form id="queryForm">
			<fieldset>
				<label for="key">关键字</label>
				<input type="text" id="key" name="key" value="${spuVo.key}">
				<label for="brand">品牌</label>
				<select id="brand" name="brandId"> 
					<option value="0">==请选择==</option>
					<c:forEach items="${list}" var="brand">
						<option value="${brand.id}">${brand.name}</option>
					</c:forEach>
				</select>
				
				<label for="orderColumn">排序字段</label>
				<select id="orderColumn" name="orderColumn">
					<option value="">===请选择===</option>
					<%-- <c:if test="${sortColum=='goodsName'}">selected</c:if> --%>
					<option value="goods_name" ${spuVo.orderColumn=='goodsName'?"selected":""}>名称</option>
					<option value="caption" ${spuVo.orderColumn=='caption'?"selected":""}>标题</option>
					<option value="category_id" ${spuVo.orderColumn=='category_id'?"selected":""}>分类</option>
					<option value="brand_id" ${spuVo.orderColumn=='brand_id'?"selected":""}>品牌</option>
				</select>
				
				<label for="orderType">排序方式</label>
				<input type="radio" name="orderType" value="ASC" ${spuVo.orderType=='ASC'?"checked":""}>升序 &nbsp;&nbsp;&nbsp;
				<input type="radio" name="orderType" value="DESC" ${spuVo.orderType=='DESC'?"checked":""}>降序
			</fieldset>
			<fieldset>
				<button type="button" class="btn btn-primary btn-sm"  onclick="query(1)">查询</button>
			</fieldset>
			
		 </form>
		 </div>
		<!-- 查询结果 -->
		<div>
			<table class="table">
				<tr>
					<th>id
						<input type="checkbox">
					</th>
					<th>名称</th>
					<th>在售</th>
					<th>品牌</th>
					<th>标题</th>
					<th>分类</th>
					<th>图片</th>
					<th>操作</th>
				</tr>
				<c:forEach items="${info.list}" var="s">
					<tr>
						<td>${s.id}</td>
						<td>${s.goodsName}</td>
						<td>
							<c:if test="${s.isMarketable==1}">在售</c:if>
							<c:if test="${s.isMarketable==0}">下架</c:if>
						</td>
						<td>${s.brand.name}</td>
						<td>${s.caption}</td>
						<td>${s.category.name}</td>
						<td>
							<img alt="" src="/pic/${s.smallPic}" width="50" height="50">
						</td>
						<td>
							<button type="button" class="btn btn-primary btn-sm"  onclick="toUpdate(${s.id})">修改</button>
			                <button type="button" class="btn btn-danger btn-sm"  onclick="del(${s.id})">删除</button>
			                <button type="button" class="btn btn-danger btn-sm" onclick="toAddSku(${s.id})">添加SKU</button>
						</td>
					</tr>
				</c:forEach>
			</table>
		</div>
		 <div>
	 	<nav aria-label="Page navigation example">
		  <ul class="pagination">
		    <li class="page-item"><a class="page-link" href="#">首页</a></li>
		    
		    <c:forEach begin="1" end="${info.pages}" var="page">
		   	 	<c:if test="${page!=info.pageNum}">
		   	 	<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="query(${page})">${page}</a></li>
		   	 	</c:if>
		   	 	<c:if test="${page==info.pageNum}">
		   	 	<li class="page-item"><a class="page-link" href="javascript:void(0)" ><font color="red">${page}</font> </a></li>
		   	 	</c:if>
		    </c:forEach>
		    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
		  </ul>
		</nav>
	 </div>
	
	
	</div>
</body>
<script type="text/javascript">
	function query(page){
		var query=$("#queryForm").serialize();
		$("#workContent").load('./spu/list?pageNum='+page,query);
	}
	function toAdd(){
		$("#workContent").load('./spu/toAdd');
	}
	function del(ids){
		if(!confirm("确认要删除吗?"))
			return;
		/* var ids=new Array();
		ids.push(id); */
		$.post(
				"./spu/del",
				{ids:ids},
				function(data) {
					if(data=='ok'){
						alert("删除成功");
						query("${info.pageNum}");
					}else{
						alert("删除失败");
					}
				}
		       )
	}
	function toUpdate(id){
		$("#workContent").load('./spu/toUpdate',{id:id});
	}
	function toAddSku(spuid){
		$("#workContent").load('./sku/toAdd',{spuId:spuid});
	}
</script>
</html>